<template>
	<view>
		<!-- 顶部轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item,k in swiperImg" :key="k">				
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" :src="item" ></image>							
					</view>
				</swiper-item>
				<view v-if="videoSrc" class="swiper-item">
					<video
						class="video"
						:src="videoSrc"
						:enable-play-gesture="true"
						:muted="true" 
						:vslide-gesture="true" 
						:autoplay="false" 
						:page-gesture="true" 
						:show-mute-btn="true"
						controls="false"
					>
					</video>
				</view>
			</swiper>
		</view>
		
		<view class="car-info">
			<view class="info-left">
				<view class="car-name">{{carname}}</view>
			</view>
		    <view class="info-right">
		    	<view class="right-price">
		    		<view class="" style="color: red;">
		    			￥
		    		</view>
					<view class="" style="color: red;font-size: 1.3rem;">
						{{carprice}}
					</view>
					<view class="">
						/均价
					</view>
		    	</view>
		    </view>
		    
		</view>
		
		<view class="configuration">
			<view class="configuration-title">
				基本配置
			</view>
			<view class="configuration-content">
				<view class="content-item">
					<view class="item-top">
						{{carfuel}}
					</view>
					<view class="item-bottom">
						燃料类型
					</view>
				</view>
				<view class="content-item">
					<view class="item-top">
						{{carseat}}
					</view>
					<view class="item-bottom">
						座位
					</view>
				</view>
				<view class="content-item">
					<view class="item-top">
						{{caremission}}
					</view>
					<view class="item-bottom">
						排放标准
					</view>
				</view>
				<view class="content-item">
					<view class="item-top">
						{{cargearbox}}
					</view>
					<view class="item-bottom">
						变速箱
					</view>
				</view>
				<view class="content-item">
					<view class="item-top">
						{{cardisplacement}}
					</view>
					<view class="item-bottom">
						排量
					</view>
				</view>
				<view class="content-item">
					<view class="item-top">
						{{carcolor}}
					</view>
					<view class="item-bottom">
						颜色
					</view>
				</view>
			</view>
		</view>
		
		<view class="subscribeInfo">
			<!-- <view class="infoItem" @click="brandShow = true">
				<view class="label">车辆品牌</view>
				<view class="value">
					<view v-if="carbrank"> {{carbrank}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view> -->
			<!-- <view class="infoItem">
				<view class="label">车辆名称</view>
				<view class="value">
					<u-input v-model="carname" :type="text" :border="false" input-align="right" placeholder="请填写车辆名称"/>
				</view>
			</view>
			<view class="infoItem"@click="md = true">
				<view class="label">租车门店</view>
				<view class="value">
					<view v-if="mendian"> {{mendian}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="car=true">
				<view class="label">车牌号</view>
				<view class="value">
					<view v-if="carnumberplate"> {{carnumberplate}}</view>
					<view v-else> 请填写</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view> -->
			<view class="infoItem">
				<view class="label">日租价格</view>
				<view class="value">
					<u-input v-model="carprice" :type="text" :border="false" input-align="right" placeholder="请填写车辆日租价格"/>
				</view>
			</view>
			<!-- <view class="infoItem" @click="gearbox=true">
				<view class="label">变速箱</view>
				<view class="value">
					<view v-if="cargearbox"> {{cargearbox}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="fuel=true">
				<view class="label">燃料类型</view>
				<view class="value">
					<view v-if="carfuel"> {{carfuel}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="emission=true">
				<view class="label">排放</view>
				<view class="value">
					<view v-if="caremission"> {{caremission}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="emission=true">
				<view class="label">排量</view>
				<view class="value">
					<u-input v-model="cardisplacement" :type="text" :border="false" input-align="right" placeholder="请填写车辆排量"/>
				</view>
			</view>
			<view class="infoItem" @click="color=true">
				<view class="label">颜色</view>
				<view class="value">
					<view v-if="carcolor"> {{carcolor}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view>
			<view class="infoItem" @click="seat=true">
				<view class="label">座位数</view>
				<view class="value">
					<view v-if="carseat"> {{carseat}}</view>
					<view v-else> 请选择</view>
					<u-icon name="arrow-right" :size='40'></u-icon>
				</view>
			</view> -->
			<view class="infoItem">
				<view class="label">联系人</view>
				<view class="value">
					<view>
						<u-input v-model="contacts" :type="text" :border="false" input-align="right" placeholder="请填写联系人"/>
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view class="label">联系电话</view>
				<view class="value">
					<view>
						<u-input v-model="telephone" :type="text" :border="false" input-align="right" placeholder="请填写联系电话"/>
					</view>					
				</view>
			</view>
			<!-- <view class="infoItem">
				<view class="label">身份证号码</view>
				<view class="value">
					<view>
						<u-input v-model="sfz" :type="text" :border="false" input-align="right" placeholder="请填写身份证号码"/>
					</view>					
				</view>
			</view> -->
		</view>
		
		<!-- <view class="image">
			<view class="image-top">
				<view class="top-title">
					车辆图片
				</view>
				<view class="top-tishi">
					（禁止上传不良图片）
				</view>
				<view class="top-content">
					<u-upload
						ref="uUpload"
						:action="action"
						:auto-upload="true"
						:file-list="carList"
						max-count="6"
						name="image"
						size-type="['compressed']"
						max-size="3145728"
						@on-change="getImage"
						>
					</u-upload>
				</view>
			</view>
			<view class="image-top">
				<view class="top-title">
					行驶证图片
				</view>
				<view class="top-tishi">
					（禁止上传不良图片）
				</view>
				<view class="top-content">
					<u-upload
						ref="uUploads"
						:action="action"
						:file-list="xszList"
						:auto-upload="true"
						max-count="2"
						name="image"
						size-type="['compressed']"
						max-size="3145728"
						@on-change="getxszImage"
						>
					</u-upload>
				</view>
			</view>
		</view> -->
		
		<view class="" style="padding: 20px;">
			<u-button type="primary" @click="submit">提交审核</u-button>
		</view>
		
		<!-- <u-select v-model="brand" :list="brandList" @confirm="confirmbrand"></u-select> -->
		<u-select v-model="brandShow" mode="mutil-column-auto" :list="brandList" @confirm="confirm" value-name="id" label-name="name" child-name="children_text"></u-select>
		<u-select v-model="gearbox" :list="gearboxList" @confirm="confirmGb"></u-select>
		<!-- 门店选择器 -->
		<u-select v-model="md" mode="single-column" :list="mendianList" @confirm="confirmMd"></u-select>
		<!-- 排放选择器 -->
		<u-select v-model="emission" :list="emissionList" @confirm="confirmEm"></u-select>
		<!-- 燃料类型选择器 -->
		<u-select v-model="fuel" :list="fuelList" @confirm="confirmFu"></u-select>
		<!-- 座位选择器 -->
		<u-select v-model="seat" :list="seatList" @confirm="confirmSe"></u-select>
		<u-keyboard ref="uKeyboard" mode="car" v-model="car" :mask="false" @confirm="carConfirm" @change="valChange" @backspace="backspace"></u-keyboard>
		<u-popup v-model="color" mode="bottom" :mask="false" height="300px">
			<view class="color">
				<view class="colorone">
					<view class="colorone-item" @click="selectColor(1)">
						<view style="background-color: black;height: 30px;width: 80px;"></view>
						<text>黑色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(2)">
						<view style="background-color: #ffffff;height: 30px;width: 80px;"></view>
						<text>白色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(3)">
						<view style="background-color: #808080;height: 30px;width: 80px;"></view>
						<text>灰色系</text>
					</view>
					<view class="colorone-item" @click="selectColor(4)">
						<view style="background-color: #e6e8fa;height: 30px;width: 80px;"></view>
						<text>银色系</text>
					</view>
				</view>
				<view class="colortow">
					<view class="colortow-item" @click="selectColor(5)">
						<view style="background-color: #7b3b01;height: 30px;width: 80px;"></view>
						<text>棕色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(6)">
						<view style="background-color: #cc1100;height: 30px;width: 80px;"></view>
						<text>红色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(7)">
						<view style="background-color: #194bb1;height: 30px;width: 80px;"></view>
						<text>蓝色系</text>
					</view>
					<view class="colortow-item" @click="selectColor(8)">
						<view style="background-color: #e5ba0f;height: 30px;width: 80px;border: #808080 1 solid;"></view>
						<text>黄色系</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				如您需要的颜色未在以上列出请输入
			</view>
			<view class="bottomone">
				<view class="">
					<u-input v-model="carcolor" type="text" :border="false" input-align="center" placeholder="请输入颜色"/>
				</view>
			</view>
			<view class="bottomtow">
				<view class="">
					<u-button type="primary" @click="color=false">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hireId: 0,
				info: [],
				brandShow: false,
				car: false,
				gearbox: false,
				fuel: false,
				seat: false,
				color: false,
				value: true,
				brand: false,
				emission: false,
				md: false,
				displacement: false,
				action: 'https://adjyxw.h1668.com/home/product/Product/upload',//图片上传路径
				carList: [],
				carListimage: '',
				xszList: [],
				imageUrl: '',//车辆图片路径
				xszimageUrl: '',//行驶证图片路径
				carbrank: '',//车辆品牌
				mendian: '',//门店
				mendianId: '',//门店id
				brandId: 0,//品牌id
				series: 0,//系列id
				cardisplacement: '',//排量
				carname: '',//车辆名称
				carnumberplate: '',//车牌号
				carprice: '',//日租价格
				caremission: '',//排放
				carseat: '',//座位数
				carfuel: '',//燃料类型
				cargearbox: '',//变速箱	
				carcolor: '',//颜色
				contacts: '',//联系人
				telephone: '',//联系人电话
				sfz: '',//身份证
				userData: {},
				brandList: [],
				swiperImg: [],
				videoSrc: '',
				gearboxList: [
					{
						value: '1',
						label: '自动挡'
					},
					{
						value: '2',
						label: '手动挡'
					},
				],
				mendianList: [
					{
						value: '1',
						label: '拱北店'
					},
					{
						value: '2',
						label: '香洲店'
					}			
				],
				emissionList: [
					{
						value: '1',
						label: '国一'
					},
					{
						value: '2',
						label: '国二'
					},
					{
						value: '3',
						label: '国三'
					},
					{
						value: '4',
						label: '国四'
					},
					{
						value: '5',
						label: '国五'
					},
					{
						value: '6',
						label: '国六'
					},
					{
						value: '7',
						label: '欧一'
					},
					{
						value: '8',
						label: '欧二'
					},
					{
						value: '9',
						label: '欧三'
					},
					{
						value: '10',
						label: '欧四'
					},
					{
						value: '11',
						label: '欧五'
					},
					{
						value: '12',
						label: '欧六'
					}
				],
				fuelList: [
					{
						value: '1',
						label: '汽油'
					},
					{
						value: '2',
						label: '柴油'
					},
					{
						value: '3',
						label: '油电混合'
					},
					{
						value: '4',
						label: '增程式'
					}
				],
				seatList: [
					{
						value: '1',
						label: '2座'
					},
					{
						value: '2',
						label: '4座'
					},
					{
						value: '3',
						label: '5座'
					},
					{
						value: '4',
						label: '6座'
					}
				]
			};
		},
		onLoad(item) {
			this.hireId = item.id
			this.getHireDetail()
			this.getCarBrand()
			this.getProdcutInfo()
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
		},
		methods: {
			//提交按钮
			submit() {
				this.postMessage()
			},
			//post信息给后端
			postMessage() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/hire/Hire/edit',
					method: 'POST',
					data: {
						hireid: this.hireId,
						busid: this.userData.id,//用户id
						brand_id: this.brandId,//品牌id
						btypeid: this.series,//系列id
						name: this.carname,//车辆名称
						stoid: this.mendianId,//租车门店
						nickname: this.contacts,//联系人姓名
						mobile: this.telephone,//联系人电话
						sfz: this.sfz,//联系人身份证
						price: this.carprice,//租车日价格
						emission: this.caremission,//排放
						displacement: this.cardisplacement,//排量
						gearbox: this.cargearbox,//变速箱
						fuel: this.carfuel,//燃料类型
						seat: this.carseat,//座位数
						color: this.carcolor,//车辆颜色
						carnumberplate: this.carnumberplate,//车牌号
						imageUrl: this.imageUrl,//车辆图片
						drivinglicense: this.xszimageUrl,//行驶证图片
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 1){
							uni.$u.toast('编辑成功，请耐心等待审核')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pagesC/releaseCar/releaseRecords?id=1'
								})
							}, 1500)
						}else {
							uni.showToast({
								icon: 'none',
								title: '编辑失败，请稍后再试',
								duration: 2000,
							});
						}
					}
				})
			},
			//获取品牌列表
			getCarBrand() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/hire/Hire/brandNamelist',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.brandList = res.data.data;
					}
				})
			},
			//获取车辆图片上传后的路径
			getImage() {
				const { lists } = this.$refs.uUpload;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				const files = lists.filter(val => val.progress === 100);
				this.imageUrl = files.slice(0, 6).map(file => file.response.result).join(',');
			},
			//行驶证图片
			getxszImage() {
				const { lists } = this.$refs.uUploads;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				const files = lists.filter(val => val.progress === 100);
				this.xszimageUrl = files.slice(0, 2).map(file => file.response.result).join(',');
				console.log(this.xszimageUrl)
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.carnumberplate += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.carnumberplate.length) this.carnumberplate = this.carnumberplate.substr(0, this.carnumberplate.length - 1);
			},
			carConfirm() {
				this.info.numberplate = this.carnumberplate
			},
			selectColor(value) {
				this.color = false
				switch (value) {
					case 1:
						this.carcolor = '黑'
					break;
					case 2:
						this.carcolor = '白'
					break;
					case 3:
						this.carcolor = '灰'
					break;
					case 4:
						this.carcolor = '银'
					break;
					case 5:
						this.carcolor = '棕'
					break;
					case 6:
						this.carcolor = '红'
					break;
					case 7:
						this.carcolor = '蓝'
					break;
					case 8:
						this.carcolor = '黄'
					break;
				}
			},
			//车辆品牌选择
			confirmbrand(e) {
				this.carbrank = e[0].label
				this.brandId = e[0].value
				
			},
			//变速箱选择
			confirmGb(e) {
				this.cargearbox = e[0].label
			},
			//门店选择
			confirmMd(e) {
				console.log(e)
				this.mendian = e[0].label
				this.mendianId = e[0].value
			},
			//燃料类型选择
			confirmFu(e) {
				this.carfuel = e[0].label
			},
			//座位选择
			confirmSe(e) {
				this.carseat = e[0].label
			},
			//品牌系列选择
			confirm(e) {
				this.carbrank = e[0].label + e[1].label
				this.brandId = e[0].value
				this.series = e[1].value
			},
			//变排放选择
			confirmEm(e) {
				this.caremission = e[0].label
			},
			getHireDetail() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/hire/Hire/hireDetail',
					method: 'POST',
					data: {
						hireid: this.hireId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						// 数据请求成功
						if (res.statusCode === 200) {
							const hireData = res.data.data.hire
							const hireDepot = res.data.data.depot
							const https = 'https://adjyxw.h1668.com'
							this.carbrank = hireData.brandname + hireData.btypename
							this.brandId = hireData.brand_id
							this.series = hireData.btypeid
							this.carname = hireData.name
							this.mendian = hireData.storename
							this.mendianId = hireData.stoid
							this.carnumberplate = hireData.carnumberplate
							this.carprice = hireData.price
							this.cargearbox = hireData.gearbox
							this.carfuel = hireData.fuel
							this.caremission = hireData.emission
							this.cardisplacement = hireData.displacement
							this.carcolor = hireData.color
							this.carseat = hireData.seat
							this.contacts = hireDepot.contacts
							this.telephone = hireDepot.telephone
							this.sfz = hireDepot.sfz
							this.imageUrl = hireData.product_img
							this.xszimageUrl = hireData.drivinglicense
							this.carList = hireData.hire_img
							this.xszList = hireData.drivinglicense_img
							this.carListimage = hireData.hire_img[0].url
						}
					},
					fail: (err) => {
						// 数据请求失败
					}
				});
			},
			getProdcutInfo() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/getcarDetail',
					method: 'POST',
					data: {
						carid: this.hireId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.swiperImg = res.data.data.thumbs_text
						this.videoSrc = res.data.data.vedio_text
					}
				})
			},
 		},
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	.swiper {
		height: 400rpx;
		.swiper-item {
			display: block;
			height: 350rpx;
			line-height: 350rpx;
			text-align: center;
		}
	}
}
.video {
	height: 100%;
	width: 100%;
}
.car-info {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	.info-left {
		.car-name {
			font-size: 1.25rem;
			color: black;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		.carde {
			display: flex;
			.carpeizhi {
				color: #909090;
				font-size: 0.9rem;
				margin-bottom: 20rpx;
			}
			.cardetail {
				margin-left: 10px;
				color: #7bb8b3;
				font-size: 0.9rem;
			}
		}
	}
	.info-right {
		// width: 130px;
		height: 30px;
		line-height: 30px;
		.right-price {
			display: flex;
			align-items: flex-end;
			line-height: 1;
		}
	}
}
.configuration {
	.configuration-title {
		color: black;
		font-size: 16px;
		margin-left: 10px;
		border-bottom: 1px solid #bababa;
		border-top: none;
		border-left: none;
		border-right: none;
	}
	.configuration-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.content-item {
			width: calc(33.33% - 10px);
			height: 60px;
			margin-bottom: 10px;
			text-align: center;
			.item-top {
				margin-top: 10px;
				font-size: 17px;
			}
			.item-bottom {
				margin-top: 5px;
				color: #ccc;
				font-size: 16px;
			}
		}
	}
}
.subscribeInfo {
	margin-top: 20rpx;

	.infoItem {
		height: 76rpx;
		display: flex;
		color: #5D5C5C;
		border-bottom: 1px solid #F1F1F1;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		padding: 0 30rpx;
		margin-top: 20rpx;

		.label {
			font-size: 34rpx;
		}

		.value {
			font-size: 32rpx;
			display: flex;
			margin-right: 10rpx;

			.icon {
				width: 40rpx;
			}
		}
	}

	.infoItem:last-child {
		border-bottom: 0;
	}
}
.title {
	font-size: 18px;
	margin-left: 15rpx;
}
.content {
	margin-top: 50rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	.content-item {
		width: 30%;
		text-align: center;
		image{
			border: #5D5C5C 1px solid;
			border-radius: 10px;
			width: 100%;
			height: 110px;
		}
		text{
			color: black;
			font-size: 18px;
			font-weight: bold;
		}
	}
}
.bottom {
	text-align: center;
	font-size: 18px;
	margin-top: 110rpx;
}
.bottomone {
	width: 100%;
	margin: 0 auto;
}
.bottomtow {
	width: 50%;
	margin: 15px auto
}
.color {
	.colorone, .colortow{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		.colorone-item, .colortow-item {
			view{
				border: #5D5C5C 1px solid;
				border-radius: 5px;
			}
		}
	}
	.colortow {
		margin-top: 10px;
	}
}
.show {
	width: 90%;
	margin: 0 auto;
	.show-title {
		margin-top: 50px;
		font-size: 18px;
	}
	.show-content{
		margin-left: 50rpx;
		color: #5D5C5C;
	}
}
.image{
	.image-top {
		font-size: 34rpx;
		padding: 15px;
	}
	.top-tishi {
		font-size: 25rpx;
	}
}
</style>
